<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" >
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
		<link rel="stylesheet" href="../../admin/css/other/console2.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md8">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">
								快捷菜单
							</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space10">
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home1" data-title="主页" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-home"></i>
										</div>
										<span class="pear-card-title">主页</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home2" data-title="弹层" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-camera"></i>
										</div>
										<span class="pear-card-title">弹层</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home2" data-title="聊天" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-star"></i>
										</div>
										<span class="pear-card-title">聊天</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home3" data-title="相机" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-camera"></i>
										</div>
										<span class="pear-card-title">相机</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home4" data-title="表单" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-console"></i>
										</div>
										<span class="pear-card-title">表单</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home5" data-title="安全" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-auz"></i>
										</div>
										<span class="pear-card-title">安全</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home6" data-title="公告" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-cart"></i>
										</div>
										<span class="pear-card-title">公告</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home7" data-title="更多" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-app"></i>
										</div>
										<span class="pear-card-title">更多</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">
								数据统计
							</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space10">
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">菜品种类</div>
											<div class="count pear-text" th:text="${foodKinds}"></div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">菜品总数</div>
											<div class="count pear-text" th:text="${foodNums}"></div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">用户数量</div>
											<div class="count pear-text" th:text="${userNums}"></div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">总收入</div>
											<div class="count pear-text" th:text="${income}"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!--  -->
					<div class="layui-col-md6">
						<div class="layui-card ">
							<div class="layui-card-body">
								<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
									<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
								</div>
							</div>
						</div>
					</div>

					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-body">
								<div class="layui-tab " >
									<div id="user-records" style="background-color:#ffffff;min-height:400px;"></div>
								</div>
							</div>
						</div>
					</div>

<!--				<p shiro:hasRole="super_admin">-->
<!--					<div class="layui-col-md12">-->
<!--						<div class="layui-card">-->
<!--							<div class="layui-card-header">-->
<!--								权限详情-->
<!--							</div>-->
<!--							<div class="layui-card-body">-->
<!--								<table id="role-table" lay-filter="role-table"></table>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</p>-->

				</div>
			</div>
			<div class="layui-col-md4">
				<div class="layui-card">
					<div class="layui-card-header">信息</div>
					<div class="layui-card-body">
						<ul class="pear-card-status">

							<li th:each="info:${adoptInfos}">
								<span >申请信息: </span>
								<p th:text="${info.message}"></p>
								<p>申请时间: </p>
								<span th:text="${info.modGmt}"></span>


								<p th:if="${info.status} == 3">
									<a href="javascript:;" th:id="${info.uId}"   onclick="adoptUserInfo(id)" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">用户信息</a>
									<a href="javascript:;" th:id="${info.id}" onclick="adoptHandler(id)" class="pear-btn pear-btn-warming pear-btn-xs pear-reply2">已审核</a>
								</p>
								<p th:if="${info.status} == 2">
									<a href="javascript:;" th:id="${info.uId}"   onclick="adoptUserInfo(id)" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">用户信息</a>
									<a href="javascript:;" th:id="${info.id}" onclick="adoptHandler(id)" class="pear-btn pear-btn-warming pear-btn-xs pear-reply2">已审核</a>
								</p>
								<p th:if="${info.status} == 1">
									<a href="javascript:;" th:id="${info.uId}"   onclick="adoptUserInfo(id)" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">用户信息</a>
									<a href="javascript:;" th:id="${info.id}" onclick="adoptHandler(id)" class="pear-btn pear-btn-warming pear-btn-xs pear-reply2">审核中</a>
								</p>
								<p th:if="${info.status} == 0">
									<a href="javascript:;" th:id="${info.uId}"   onclick="adoptUserInfo(id)" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">用户信息</a>
									<a href="javascript:;" th:id="${info.id}" onclick="adoptHandler(id)" class="pear-btn  pear-btn-warming pear-btn-xs pear-reply2">去审核</a>
								</p>
							</li>



						</ul>
					</div>
				</div>
			</div>
		</div>


		<script type="text/html" id="role-name">
			{{#if (d.id == 1) { }}
			<span>超级管理员</span>
			{{# }else if(d.id == 2){ }}
			<span>普通管理员</span>
			{{# }else if(d.id == 3){ }}
			<span>普通用户</span>
			{{# } }}
		</script>
		<script type="text/html" id="role-detail">
			{{#if (d.id == 1) { }}
			<h4><span>boss</span></h4>
			{{# }else if(d.id == 2){ }}
			<span>管理员</span>
			{{# }else if(d.id == 3){ }}
			<span>用户</span>
			{{# } }}
		</script>

		<!--</div>-->
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			// 处理申请
			function adoptHandler(id){
				layer.open({
					type: 2,
					title: '处理申请',
					shade: 0.1,
					area: ['700px', '600px'],
					content: '/adopt-info/getOneAdoptInfo/'+id
				});
			}

			// 查看用户详细信息
			function adoptUserInfo(id){
				layer.open({
					type: 2,
					title: '用户信息',
					shade: 0.1,
					btn:['确认'],
					area: ['800px', '600px'],
					content: '/user-info/viewOneUserInfo/'+id
				});
			}


			layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					echarts = layui.echarts,
					table = layui.table,
					carousel = layui.carousel;

				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: '角色名',
							field: 'id',
							align: 'center',
							templet: '#role-name'
						},
						{
							title: 'Key值',
							field: 'name',
							align: 'center'
						},
						{
							title: '描述',
							field: 'id',
							align: 'center',
							templet: '#role-detail'
						}
					]
				]

				table.render({
					elem: '#role-table',
					url: '/console/userRole',
					page: true,
					cols: cols,
					skin: 'line'
				});

				$("body").on("click", "[data-url]", function() {
					parent.layui.tab.addTabOnlyByElem("content", {
						id: $(this).attr("data-id"),
						title: $(this).attr("data-title"),
						url: $(this).attr("data-url"),
						close: true
					})
				})


				// 表格初始化
				var echartsRecords = echarts.init(document.getElementById('echarts-records'));
				var userRecords = echarts.init(document.getElementById('user-records'));

				// 过渡加载动画
				echartsRecords.showLoading();
				userRecords.showLoading();

				// 加载动物数量表
				$.ajax({
					url: '/console/foodKindData' ,
					type: 'get',
					dataType:'json',
					success:function (result) {
						console.log(result.data);
						echartsRecords.setOption({
							title: {
								text: '食品种类统计',
								left: 'left'
							},
							tooltip: {
								trigger: 'item'
							},
							legend: {
								top: '5%',
								left: 'center'
							},
							series: [{
								// name: '详情',
								type: 'pie',
								radius: ['40%', '70%'],
								avoidLabelOverlap: false,
								itemStyle: {
									borderRadius: 10,
									borderColor: '#fff',
									borderWidth: 2
								},
								label: {
									show: false,
									position: 'center'
								},
								emphasis: {
									label: {
										show: true,
										fontSize: '40',
										fontWeight: 'bold'
									}
								},
								labelLine: {
									show: true
								},
								data: result.data
							}]
						})
					}
				});
				// 关闭过渡加载动画
				echartsRecords.hideLoading();

				// 加载用户表
				$.ajax({
					url: '/console/userRecords' ,
					type: 'get',
					dataType:'json',
					success:function (result) {
						userRecords.setOption({
							title: {
								text: '用户总数统计',
								left: 'center'
							},
							tooltip: {
								trigger: 'item'
							},
							legend: {
								top: '5%',
								orient: 'vertical',
								left: 'left',
							},
							series: [
								{
									name: '详情',
									type: 'pie',
									radius: '50%',
									data: result.data,
									emphasis: {
										itemStyle: {
											shadowBlur: 10,
											shadowOffsetX: 0,
											shadowColor: 'rgba(0, 0, 0, 0.5)'
										}
									}
								}
							]
						})
					}
				});
				// 加载动画
				userRecords.hideLoading();


				window.onresize = function() {
					userRecords.resize();
					echartsRecords.resize();
				}

			});
		</script>
	</body>
</html>
